Hamburger Menu Guide 漢堡選單新指南

Then: The Hamburger Lowered Interface Usability 早期研究發現：漢堡選單降低可用性

在 2015–2016 年，NNGroup 進行了一系列定性與定量研究，對比隱藏導航（如漢堡選單）與始終可見導航，結果顯示：

因此，早期研究建議儘量避免使用漢堡選單，尤其在桌面端。只有在確實存在空間限制時才考慮採用，並需配合一系列使用規範。

Now: The Hamburger Is a Familiar Pattern 如今的使用者習慣：漢堡選單已被廣泛識別

隨著移動優先設計的普及，使用者對漢堡選單的認知逐漸加深。研究顯示：多數使用者能正確識別漢堡圖示為“主選單”或“頂級導航分類”，尤其當它：

Dick's Sporting Goods（移動端）使用標準樣式的漢堡圖示，即使去掉了“Menu”文字標籤，使用者也能正確識別它為主選單。

案例說明： 標準樣式 + 標準位置 → 識別無誤。

Vivaia（移動端）採用兩條線版本的漢堡圖示，因放在左上角，使用者也能正確識別。簡化樣式無礙識別，只要位置正確。

案例：

Toms（移動端）使用邊框包圍的漢堡圖示，有使用者誤以為是“檔案”圖示，但因無其他選單存在，最終還是認為它是主選單。樣式變化可能引起輕微困惑，尤其加上邊框時。

Newsweek（移動端）在三條線上加了一個箭頭，使用者仍能理解其是選單圖示。多餘裝飾可能被忽略，但建議保持圖示簡潔。

結論：只要位置保持在標準區域，使用者對漢堡圖示樣式有較高的寬容度。然而，這項研究並未測量任務完成時間或成功率，因此無法確定早期發現的可用性問題是否已經得到改善。

Caution: When Familiarity Becomes Interference 當“熟悉”反而帶來幹擾

由於漢堡選單圖示已深入使用者心智模型，任何相似結構的圖示都可能被誤判為“主選單”，尤其當它們出現在左上角。

Apple Notes（桌面端）在左上角放置了一個“列表檢視”圖示（三條帶點的橫線），使用者誤以為它是導航選單。 使用者認為它會展開一個選單欄或導航項。

YouTube（移動端）底部選單中的“搜尋篩選器”圖示被誤解為分類列表或收藏列表。即使圖示不在左上角，線條分組圖示仍容易引發誤解。

設計師需謹慎使用線條構成的圖示，尤其避免它們出現在使用者通常認定為導航的區域（如左上角），並儘量加上文字標籤輔助解釋。

Recommendations for Designing Hamburger Icons 設計漢堡選單的最佳實踐建議

研究確認：使用者通常能識別漢堡圖示為導航選單。為確保可用性，請遵循：

  1. 採用標準三條線圖示：保持簡單，避免創新。
  1. 放在左上角：使用者習慣在此查詢導航。
  1. 避免邊框裝飾：可能導致誤解。
  1. 新增"Menu"標籤：適合新使用者或非常規佈局。
  1. 使用輕微動效：如滑出動畫，提供操作反饋。
  1. 防止視覺混淆：其他三線圖示不應放在左上角。
  1. 合適尺寸：避免大螢幕上的小圖示。
  1. 確保可點選性：讓使用者知道這是按鈕。
  1. 保留周圍空間：避免與其他元素擁擠。
  1. 充足對比度：考慮視力受限使用者。
  1. 配合其他導航：如頁內連結、頁尾導航和搜尋功能。

Conclusion: The Updated Verdict 結語：更新後的判斷標準

漢堡選單圖示如今確實已被大多數使用者熟悉和接受，但“熟悉”並不等於“完美”或“無代價”。